<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="info">
            <view class="info-title flex-row">
                <navigator class="flex-x-center  width " openType="redirect" url="/pages/share-order/share-order?status=-1">
                    <view :class="['info-text', data.status==-1?'active':'']">全部</view>
                </navigator>
                <navigator class="flex-x-center  width " openType="redirect" url="/pages/share-order/share-order?status=0">
                    <view :class="['info-text', data.status==0?'active':'']">待付款</view>
                </navigator>
                <navigator class="flex-x-center width " openType="redirect" url="/pages/share-order/share-order?status=1">
                    <view :class="['info-text', data.status==1?'active':'']">已付款</view>
                </navigator>
                <navigator class="flex-x-center width" openType="redirect" url="/pages/share-order/share-order?status=2">
                    <view :class="['info-text', data.status==2?'active':'']">已完成</view>
                </navigator>
            </view>
            <view class="info-content">
                <view class="info-block" v-for="(item,index) in data.list" :key="index">
                    <view class="info-label flex-row">
                        <view class="info-left" style="width:80%">订单号：{{item.order_no}}</view>
                        <view class="info-right" style="width:20%">
                            <view class="info-status">{{item.status}}</view>
                        </view>
                    </view>
                    <view @tap="click" class="info-label flex-row" :data-index="index">
                        <view class="info-left flex-row flex-grow-1 flex-y-center">
                            <view class="info-img flex-y-center">
                                <image class="img" :src="item.avatar_url"></image>
                            </view>
                            <view class="info-name text-more">{{item.nickname}}</view>
                            <view class="info-level text-more">{{item.share_status}}</view>
                        </view>
                        <view class="info-right flex-grow-1">
                            <view class="info-money flex-row">
                                <text>{{item.is_price!=1?'预计':'已得'}}佣金：<text class="red">{{item.share_money}}</text>元</text>
                                <view :class="['down flex-y-center', index==hidden?'active':'']">
                                    <image :src="data.__wxapp_img.share.down.url" style="width:26upx;height:16upx;margin-left: 24upx;" v-if="index==data.hidden"></image>
                                    <image :src="data.__wxapp_img.share.right.url" style="width:16upx;height:26upx;margin-left: 24upx;" v-else></image>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view :class="index==data.hidden?'show':'hide'">
                        <view class="info-label height-164 flex-row" v-for="(v,i) in item.orderDetail" :key="i">
                            <view class="info-left flex-row width-90">
                                <view class="info-img flex-y-center">
                                    <image class="img img-size-120" :src="v.goods_pic"></image>
                                </view>
                                <view class="info-count">
                                    <view class="info-detail">{{v.name}}</view>
                                    <view class="info-detail">×{{v.num}}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="info-footer flex-row" v-if="data.is_no_more">
                <view class="info-before">
                    <view class="info-border"></view>
                </view>
                <view class="info-t">没有更多了</view>
                <view class="info-after">
                    <view class="info-border"></view>
                </view>
            </view>
            <view v-if="data.is_loading">
                <view :class="['loading-bar', data.show_loading_bar?'active':'']" style="text-align: center">
                    <image :src="data.__wxapp_img.system.loading.url" style="width: 160upx;height: 80upx"></image>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = !1, a = !1, e = 2;
	export default {
		data() {
			return {
				data: {
        status: -1,
        list: [],
        hidden: -1,
        is_no_more: !1,
        is_loading: !1
    },
			};
		},
		onLoad: function(s) {myVue = this;
        myVue.getApp.page.onLoad(this, s), t = !1, a = !1, e = 2, this.GetList(s.status || -1);
    },
		onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function() {},
    click: function(t) {
        var a = this, e = t.currentTarget.dataset.index;
        a.setData({
            hidden: a.data.hidden == e ? -1 : e
        });
    },
    onReachBottom: function() {
        var s = this;
        a || t || (a = !0, s.setData({
            is_loading: a
        }), myVue.getApp.request({
            url: myVue.getApp.api.share.get_order,
            data: {
                status: s.data.status,
                page: e
            },
            success: function(a) {
                if (0 == a.code) {
                    var n = s.data.list.concat(a.data);
                    s.setData({
                        list: n
                    }), 0 == a.data.length && (t = !0, s.setData({
                        is_no_more: t
                    }));
                }
                e++;
            },
            complete: function() {
                a = !1, s.setData({
                    is_loading: a
                });
            }
        }));
    },
		methods: {
			GetList: function(t) {
        var a = this;
        a.setData({
            status: parseInt(t || -1)
        }), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.share.get_order,
            data: {
                status: a.data.status
            },
            success: function(t) {
                a.setData({
                    list: t.data
                }), 0 == t.data.length && a.setData({
                    is_no_more: !0
                });
            },
            complete: function() {
                a.getApp.core.hideLoading();
            }
        });
    },
		},
	}
</script>

<style scoped>
.info {
    width: 100%;
    border-top: 1upx #e3e3e3 solid;
}

.width {
    width: 25%;
    text-align: center;
}

.info-title .active {
    color: #ff4544;
    border-bottom: 4upx #ff4544 solid;
}

.info-title .info-text {
    height: 100%;
    line-height: 100upx;
}

.info .info-title {
    height: 100upx;
    padding: 0 24upx;
    border-bottom: 1upx #e3e3e3 solid;
    background-color: #fff;
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    z-index: 1000;
}

.info .info-content {
    width: 100%;
    padding-top: 100upx;
}

.info .info-content .info-block {
    width: 100%;
    background-color: #fff;
    margin-bottom: 26upx;
    padding: 0 24upx;
}

.info-block .info-label {
    width: 100%;
    height: 90upx;
    border-bottom: 2upx #e3e3e3 solid;
    font-size: 9pt;
    line-height: 90upx;
}

.info-block .info-label .info-left {
    width: 50%;
}

.info-block .info-label .info-right {
    width: 50%;
    text-align: right;
}

.info-block .info-label .info-status {
    color: #ff4544;
}

.info-left .info-img {
    width: 30%;
}

.info-left .info-img .img {
    width: 64upx;
    height: 64upx;
}

.info-left .info-name {
    margin-right: 36upx;
    overflow: hidden;
}

.info-block .height-164 {
    height: 164upx;
}

.info .info-block .info-label .width-90 {
    width: 90%;
}

.info-left .info-img .img-size-120 {
    width: 104upx;
    height: 104upx;
}

.info-label .info-left .info-count {
    width: 70%;
}

.info-count .info-detail {
    width: 100%;
    height: 80upx;
    overflow: hidden;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.info-right .info-money {
    text-align: right;
    float: right;
}

.red {
    color: #ff4544;
    font-size: 9pt;
}

.info-block .info-label:last-child {
    border: none;
}

.info .info-footer {
    color: #bbb;
    text-align: center;
    width: 100%;
    padding: 0 100upx;
    height: 60upx;
    line-height: 60upx;
}

.info .info-footer .info-t {
    height: 60upx;
    margin: 0 20upx;
}

.info .info-footer .info-before {
    width: 168upx;
    height: 60upx;
}

.info .info-footer .info-after {
    width: 168upx;
    height: 60upx;
}

.info .info-footer .info-border {
    border-bottom: 1upx #e3e3e3 solid;
    padding-bottom: 30upx;
}

.hide {
    display: none;
}

.show {
    display: block;
}
</style>
